কাস্টম ডিরেক্টিভ তৈরি করা

Web Development - অ্যাঙ্গুলার (Angular) - টেম্পলেট এবং ডিরেক্টিভস |

Angular ডিরেক্টিভস হলো এমন ক্লাস যা DOM-এ উপাদানের আচরণ পরিবর্তন করতে ব্যবহৃত হয়। Angular-এ তিন ধরনের ডিরেক্টিভ রয়েছে: Structural Directives, Attribute Directives, এবং Component Directives। যেহেতু আমরা কাস্টম ডিরেক্টিভ তৈরি করছি, তাই এটি Attribute Directive হিসেবে কাজ করবে। কাস্টম ডিরেক্টিভ ব্যবহার করে আপনি DOM এলিমেন্টের আচরণ, স্টাইল বা অন্যান্য প্রপার্টি পরিবর্তন করতে পারবেন।

কাস্টম ডিরেক্টিভ তৈরি করার পদ্ধতি

Angular CLI ব্যবহার করে কাস্টম ডিরেক্টিভ তৈরি করা যায়। ডিরেক্টিভ তৈরি করার জন্য, CLI কমান্ডের মাধ্যমে সহজেই ডিরেক্টিভ তৈরি করা যায় এবং এটি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় ফাইল তৈরি করবে।

1. Angular CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করা

CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করতে নিচের কমান্ডটি ব্যবহার করুন:

ng generate directive directive-name

অথবা শর্টকাট কমান্ড:

ng g d directive-name

এখানে directive-name হল আপনার ডিরেক্টিভের নাম। উদাহরণস্বরূপ, যদি আপনি একটি ডিরেক্টিভ তৈরি করতে চান যার নাম highlight হবে, তাহলে কমান্ড হবে:

ng g d highlight

এটি তৈরি করবে নিম্নলিখিত ফাইলগুলো:

highlight.directive.ts (ডিরেক্টিভের লজিক)
highlight.directive.spec.ts (টেস্ট ফাইল)

কাস্টম ডিরেক্টিভের ফাইল স্ট্রাকচার

Angular CLI দিয়ে কাস্টম ডিরেক্টিভ তৈরি করার পর, আপনার ডিরেক্টিভের জন্য একটি TypeScript ফাইল তৈরি হবে, যেখানে ডিরেক্টিভের কার্যকারিতা থাকবে। নিচে একটি কাস্টম ডিরেক্টিভের উদাহরণ দেখানো হলো:

`highlight.directive.ts`

এটি হলো কাস্টম ডিরেক্টিভের TypeScript ফাইল, যেখানে ডিরেক্টিভের কার্যকারিতা সংজ্ঞায়িত করা হয়।

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('transparent');
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

এখানে:

@Directive ডেকোরেটরটি Angular-কে জানিয়ে দেয় যে এটি একটি কাস্টম ডিরেক্টিভ।
ElementRef ক্লাসটি DOM-এ অ্যাক্সেস দেয়, যাতে আমরা HTML উপাদানটির উপর কাজ করতে পারি।
Renderer2 Angular-এর একটি নিরাপদ উপায়, যা DOM-এ স্টাইল বা অন্যান্য পরিবর্তন করতে সাহায্য করে।
@HostListener ডেকোরেটরটি DOM-এর ইভেন্টের জন্য এক বা একাধিক হ্যান্ডলার নির্ধারণ করে। এখানে, mouseenter এবং mouseleave ইভেন্টগুলোর জন্য হ্যান্ডলার নির্ধারণ করা হয়েছে যা ইউজারের মাউসের গতির উপর ভিত্তি করে কাজ করবে।

কাস্টম ডিরেক্টিভ ব্যবহার করা

এখন, কাস্টম ডিরেক্টিভটি ব্যবহার করার জন্য আপনাকে এটি HTML টেম্পলেটে যোগ করতে হবে। appHighlight ডিরেক্টিভটি [] ব্র্যাকেটের মধ্যে ব্যবহার করতে হবে।

HTML টেম্পলেটে ব্যবহার

<p appHighlight>
  হোভার করলে ব্যাকগ্রাউন্ড রং হলুদ হয়ে যাবে।
</p>

এখানে, appHighlight কাস্টম ডিরেক্টিভটি p ট্যাগের উপর প্রয়োগ করা হয়েছে। যখন আপনি মাউস পয়েন্টার নিয়ে ঐ এলিমেন্টের উপর হোভার করবেন, তখন ব্যাকগ্রাউন্ড কালার পরিবর্তিত হয়ে হলুদ হবে, এবং মাউস সরালে তা স্বাভাবিক অবস্থায় ফিরে যাবে।

কাস্টম ডিরেক্টিভের গুরুত্ব

UI আচরণ নিয়ন্ত্রণ: কাস্টম ডিরেক্টিভের মাধ্যমে আপনি DOM এলিমেন্টের আচরণ নিয়ন্ত্রণ করতে পারবেন, যেমন মাউস হোভার করলে স্টাইল পরিবর্তন, ক্লিক করলে কোনো অ্যাকশন নেওয়া ইত্যাদি।
কোড পুনঃব্যবহারযোগ্যতা: ডিরেক্টিভ ব্যবহারের মাধ্যমে কোডের পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়, কারণ এক জায়গায় একবার কোড লিখে এটি বিভিন্ন অংশে ব্যবহার করা যায়।
কাস্টমাইজেশন: Angular আপনাকে কাস্টম ডিরেক্টিভ তৈরি করার মাধ্যমে অ্যাপ্লিকেশনের কার্যকারিতা কাস্টমাইজ করতে দেয়।

সারাংশ

Angular-এ কাস্টম ডিরেক্টিভ তৈরি করা খুবই সহজ এবং CLI-এর মাধ্যমে এটি দ্রুত করা সম্ভব। এটি DOM-এর আচরণ পরিবর্তন করতে সাহায্য করে এবং অ্যাপ্লিকেশনের কার্যকারিতা বাড়াতে ভূমিকা রাখে। ElementRef এবং Renderer2 ব্যবহার করে আপনি সহজেই HTML উপাদানের স্টাইল এবং আচরণ নিয়ন্ত্রণ করতে পারবেন।

Mark as Completed

Content added By

Md Azizur Rahman

কাস্টম ডিরেক্টিভ তৈরি করা

কাস্টম ডিরেক্টিভ তৈরি করা